<template>
  <div class="sign-in-statistics">
    <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="fetchData"/>
    <el-row :gutter="24">
      <el-col :md="24" :lg="12">
        <div class="header">签到数据</div>
          <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="签到用户数" prop="allSignInUserCount" min-width="100"></el-table-column>
            <el-table-column align="center" label="总签到次数" prop="allSignInCount" min-width="100"></el-table-column>
            <el-table-column align="center" label="新签到用户数" prop="newSignInUserCount" min-width="100"></el-table-column>
            <el-table-column align="center" label="新签到用户占比" prop="percent" min-width="100">
              <template slot-scope="scope">{{scope.row.percent}}%</template>
            </el-table-column>
          </el-table>
      </el-col>
      <el-col :md="24" :lg="12">
        <div class="header">奖励数据</div>
          <el-table :data="rewardList" v-loading="rewardListLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="奖励天数" prop="signInDay" min-width="100"></el-table-column>
            <el-table-column align="center" label="奖励内容" prop="name" min-width="100"></el-table-column>
            <el-table-column align="center" label="领取人数" prop="getCount" min-width="100"></el-table-column>
            <el-table-column align="center" label="领取人数占比" prop="percent" min-width="100">
              <template slot-scope="scope">{{scope.row.percent}}%</template>
            </el-table-column>
          </el-table>
      </el-col>
    </el-row>
    
    
  </div>
</template>
<script>
import searchForm from '@/components/searchForm'
export default {
  name: 'sign-in-statistics',
  props: {
    activityId: { default: '' }
  },
  components: {
    searchForm
  },
  data(){
    return {
      listLoading: false,
      rewardListLoading: false,
      queryConfig: [
        { type:'daterange', label: '活动时间', prop: 'activityDate' }
      ],
      listQuery: {
        activitySignInId: this.activityId,
        activityDate: []
      },
      list: [],
      rewardList: []
    }
  },
  methods: {
    fetchData(){
      let flag = this.listQuery.activityDate && this.listQuery.activityDate.length
      this.listQuery.startDate = flag ? new Date(this.listQuery.activityDate[0]+' 00:00:00').getTime() : ''
      this.listQuery.endDate = flag ? new Date(this.listQuery.activityDate[1]+' 23:59:59').getTime() : ''
      this.fetchSignInData()
      this.fetchRewardData()
    },
    fetchSignInData(){
      this.listLoading = true
      this.request({
        url: "/sign-in/statistics/list",
        method: "post",
        data: this.listQuery
      }).then(({ data }) => {
          this.list = data;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
          this.list = [];
          this.listLoading = false;
        });
    },
    fetchRewardData(){
      this.rewardListLoading = true
      this.request({
        url: "/sign-in/statistics/detail",
        method: "post",
        data: this.listQuery
      }).then(({ data }) => {
          this.rewardList = data.list || [];
          this.rewardListLoading = false;
        })
        .catch(err => {
          console.log(err);
          this.rewardList = [];
          this.rewardListLoading = false;
        });
    }
  }
}
</script>
<style lang="scss">
.sign-in-statistics{
  // min-height: 500px;
  .header{
    color: #222;
    font-size: 20px;
    font-weight: 550;
    padding: 24px 0 12px;

  }
}
</style>